<template>
	<view class="scan-wrap">
		<camera mode="scanCode"
		 class="scan-camera"
		device-position="back" scan-area="[0,0,200, 200]"
		 flash="off" @scancode="takeCode"></camera>
		 <view class="border_corner border_corner_left_top"></view>
		 <view class="border_corner border_corner_right_top"></view>
		 <view class="border_corner border_corner_left_bottom"></view>
		 <view class="border_corner border_corner_right_bottom"></view>
		  <view class="scan-close" @click="close">
			  <i class="iconfont iconguanbi2"></i>
		  </view>
		  <view class="tip-text">{{scanTip}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default:'1',
			},
			scanTip:{
				type: String,
				default:'',
			}
		},
		data() {
			return {
				scanFunctionIsUseAble: true,
				resultFlag:true,
				code:'',
			};
		},
		watch:{
			resultText(val){
				this.resultText=val;
			}
		},
		methods:{
			close(){
				this.$emit('close');
			},
			takeCode(e) {
				var that = this;
			 if (that.scanFunctionIsUseAble) {
				 that.scanFunctionIsUseAble=false;
				 console.log(e.detail.result)
				 console.log(e.detail)
				this.$emit('scanCode',e.detail.result);
				  setTimeout(() => {
				   that.scanFunctionIsUseAble=true;
				  }, 2000)
			 }
			},
		}
	}
</script>

<style lang="scss">
.scan-wrap{
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.7);
	position: fixed;
	left:0;
	top:0;
	z-index:1000;
	.scan-camera{
		width: 500rpx;
		height: 500rpx;
		position: fixed;
		left:calc(50% - 250rpx);
		top:calc(50% - 300rpx);
		background-color: #fff;
		z-index:1000;
	}
	.tip-text{
		width: 100%;
		position: fixed;
		left:0;
		top:calc(50% + 230rpx);
		color: #fff;
		text-align: center;
		z-index:1000;
	}
	.scan-close{
		position: fixed;
		top: 80rpx;
		right: 40rpx;
		z-index:1000;
		padding: 20rpx;
		.iconfont{
			font-size:40rpx;
			color:#fff;
		}
	}
	
	.border_corner{
	    z-index: 999;
	    position: absolute;
	    width: 48rpx;
	    height: 48rpx;
	    background: transparent;
	    border: 4rpx solid  #02FF00;
	}
	.border_corner_left_top{
	    top:calc(50% - 308rpx);
	    left:calc(50% - 258rpx);
	    border-right: none;
	    border-bottom: none;
	}
	.border_corner_right_top{
	    top:calc(50% - 308rpx);
	    right:calc(50% - 258rpx);
	    border-left: none;
	    border-bottom: none;
	}
	.border_corner_left_bottom{
	    bottom: calc(50% - 208rpx);
	    left:calc(50% - 258rpx);
	    border-right: none;
	    border-top: none;
	}
	.border_corner_right_bottom{
	    bottom: calc(50% - 208rpx);
	    right:calc(50% - 258rpx);
	    border-left: none;
	    border-top: none;
	}
}

</style>
